// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
    unocss: {
        nuxtLayers: true,
    },
    presets: [
    ],
    transformers: [
    ],
    shortcuts: [
        ['wh-full', 'w-full h-full'],
    ],
    rules: [
        ['bt-1', { 'border-top': 'var(--el-border)' }],
        ['br-1', { 'border-style': 'var(--el-border)' }],
        ['bb-1', { 'border-style': 'var(--el-border)' }],
        ['bl-1', { 'border-style': 'var(--el-border)' }],

        [/^mt-(.+)$/, ([, size]) => ({ 'margin-top': `${size} !important` })],
        [/^mr-(.+)$/, ([, size]) => ({ 'margin-right': `${size} !important` })],
        [/^mb-(.+)$/, ([, size]) => ({ 'margin-bottom': `${size} !important` })],
        [/^ml-(.+)$/, ([, size]) => ({ 'margin-left': `${size} !important` })],
        [/^ma-(.+)$/, ([, size]) => ({ 'margin': `${size} !important` })],

        [/^pt-(.+)$/, ([, size]) => ({ 'padding-top': `${size}` })],
        [/^pr-(.+)$/, ([, size]) => ({ 'padding-right': `${size}` })],
        [/^pb-(.+)$/, ([, size]) => ({ 'padding-bottom': `${size}` })],
        [/^pl-(.+)$/, ([, size]) => ({ 'padding-left': `${size}` })],
        [/^pa-(.+)$/, ([, size]) => ({ 'padding': `${size}` })],

        ['card-shadow', { 'box-shadow': '0 0 18px 2px rgba(0, 0, 0, .1)' }],

        ['f-b', { 'display': 'flex !important' }],
        ['f-i', { 'display': 'inline-flex' }],
        ['f-a-s', { 'align-items': 'flex-start' }],
        ['f-a-c', { 'align-items': 'center' }],
        ['f-a-e', { 'align-items': 'flex-end' }],
        ['f-j-s', { 'justify-content': 'flex-start' }],
        ['f-j-c', { 'justify-content': 'center' }],
        ['f-j-e', { 'justify-content': 'flex-end' }],
        ['f-j-sb', { 'justify-content': 'space-between' }],
        ['f-wrap', { 'flex-wrap': 'wrap' }],

        ['w-full', { 'width': '100%' }],
        ['h-full', { 'height': '100%' }],
        [/^w-(.+)$/, ([, size]) => {
            const size2 = size.split('-')[0]
            return {
                'width': `${size2} !important`,
                '--el-input-width': `${size2} !important`,
                '--el-select-width': `${size2} !important`,
            }
        }],

        [/^fz-(.+)$/, ([, size]) => ({ 'font-size': `${size}` })],
        [/^opacity-(.+)$/, ([, size]) => ({ 'opacity': size })],
        [/^lh-(.+)$/, ([, size]) => ({ 'line-height': size })],
        ['ellipsis', {
            'white-space': 'nowrap',
            'overflow': 'hidden',
            'text-overflow': 'ellipsis',
            'max-width': '100%',
        }],
        ['tc', { 'text-align': 'center' }],
        [/^fw-(.+)$/, ([, s]) => {
            if (s === 'n') {
                return { 'font-weight': 'normal' }
            }
            return { 'font-weight': s }
        }],
    ],
    theme: {
        colors: {
            primary: 'var(--el-color-primary)',
            dark: 'var(--dark-bg)',
        },
    },
})